$panel-font-size: 0.75rem
$panel-hover-color: #F1F1F170
$panel-active-color: #FFF6E570

@for $width from 1 through 10
    .narrow-spacing-#{$width}
        letter-spacing: (-0.1px * $width) !important


.sidebar
    background-color: #FFFFFF
    height: calc(100vh - 6.25rem)
    padding-top: 1.25rem
    padding-bottom: 1.25rem
    padding-left: 1.875rem
    padding-right: 1.5rem
    border-left:  1px solid #DEDEDE
    position: sticky
    top: 6.25rem
    overflow-y: auto
    overflow-x: hidden
    max-width: 18%

    .sidebar-panel + .sidebar-panel
        margin-top: 1.25rem


.sidebar-panel

    &-title
        font-size: 1rem
        font-weight: 600
        color: #1D1D1D
        margin: 0 0 0.5rem 0

    &-group
        display: flex
        flex-direction: column

        .sidebar-btn + .sidebar-btn
            margin-top: 0.5rem

        .sidebar-btn
            border-color: transparent
            height: 1.875rem
            padding: 0.375rem 0.75rem
            vertical-align: middle
            display: flex
            position: relative
            font-size: 0

            &:hover
                background-color: $panel-hover-color
                
            &:active,
            &:focus,
            &.active
                background-color: $panel-active-color

.scrollSpy-btn
    $border-radius: 0.1rem
    border-radius: $border-radius

    &-symbol
        content: ""
        background-color: #A09DAF
        width: 0.75rem
        height: 0.75rem
        border-radius: 50vh
        display: inline-block
        margin-left: 1px
        margin-right: 5px
        align-self: center

    &.active &-stop
        content: ""
        position: absolute
        width: 0.5rem
        height: 100%
        top: 50%
        transform: translateY(-50%)
        right: 0
        background-color: #F0BD9C;
        border-top-right-radius: $border-radius;
        border-top-left-radius: 0;
        border-bottom-right-radius: $border-radius;
        border-bottom-left-radius: 0;

    &-text
        font-size: $panel-font-size
        color: #1D1D1D


.filter-btn
    border-radius: 50vh

    &-text
        font-size: $panel-font-size
        color: #000000